<template lang="html">
  <div class="cartcontrol">
    <transition name="move">
      <div class="cart-decrease " v-show="food.count>0" @click.stop.pervent="decreaseCart($event)">
        <transition name="rotate">
          <div class="inner icon-remove_circle_outline"></div>
        </transition>
      </div>
    </transition>
    <div class="count" v-show="food.count>0">
      {{food.count}}
    </div>
    <div class="cart-add icon-add_circle" @click.stop.prevent="addCount($event)">

    </div>
  </div>
</template>

<script>
import Vue from 'vue'

export default {

  props:{
    food:{
      type: Object
    }
  },
  created(){

  },
  methods:{
    addCount(event){
      if (!event._constructed) {
        return;
      }
      console.log("+1");
      if(!this.food.count){
        Vue.set(this.food,"count",1);
        //this.food.count = 1;
      }else {
        this.food.count++;
      }
    },
    decreaseCart(event){
      if (!event._constructed) {
        return;
      }
      console.log("-1");
      if (this.food.count) {
        this.food.count--;
      }
    }
  }
}
</script>

<style lang="less">
  .cartcontrol{
    font-size: 0;
    .cart-decrease{
      display: inline-block;
      padding: 6px;
      transition: all 0.4s linear;
      // opacity: 1;
      // transform: translate3D(0,0,0);
      .inner{
        display: inline-block;
        color: rgb(0, 160, 220);
        font-size: 24px;
        line-height: 24px;
        transform: rotate(0);
        &.rotate-leave,&.rotate-enter-active{

          transform: rotate(0);

        }
        &.rotate-enter,&.rotate-leave-active{

            transform: rotate(180deg);

        }
      }
      &.move-leave,&.move-enter-active{
        opacity: 1;
        transform: translate3d(0,0,0);

      }
      &.move-enter,&.move-leave-active{
        opacity: 0;
        transform: translate3D(24px,0,0);

      }

    }
    .count{
      display: inline-block;
      font-size: 10px;
      vertical-align: top;
      width: 12px;
      padding-top: 6px;
      line-height: 24px;
      text-align: center;
      color: rgb(147,153,159);
    }
    .cart-add{
      display: inline-block;
      padding: 6px;
      font-size: 24px;
      line-height: 24px;
      color: rgb(0,160,220);
    }
  }
</style>
